<template>
  <div class="monitor_page">
    <!-- 绘图部分 -->
    <div class="tabBox">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick" class="tabsBoxs">

        <el-tab-pane label="合成方向相对位移" name="AB">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="EchartsOneAB"
              type="AB"
            ></echarts-one-compose
            >
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="AO方向相对位移" name="A0">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="EchartsOneAO"
              type="AO"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="BO方向相对位移" name="B0">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="EchartsOneBO"
              type="BO"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
<!--        <el-tab-pane label="X角度" name="xAngle">-->
<!--          <el-card class="card_echarts" shadow="hover">-->
<!--            <echarts-one-compose-->
<!--              ref="xAngle"-->
<!--              type="X"-->
<!--            ></echarts-one-compose>-->
<!--          </el-card-->
<!--          >-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="Y角度" name="yAngle">-->
<!--          <el-card class="card_echarts" shadow="hover">-->
<!--            <echarts-one-compose-->
<!--              ref="yAngle"-->
<!--              type="Y"-->
<!--            ></echarts-one-compose>-->
<!--          </el-card-->
<!--          >-->
<!--        </el-tab-pane>-->
        <el-tab-pane label="az" name="az" >
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="az"
              type="az"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="in" name="in">
          <el-card class="card_echarts" shadow="hover">
            <echarts-one-compose
              ref="in"
              type="in"
            ></echarts-one-compose>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="三维曲线" name="xyz">
          <el-card class="card_echarts" shadow="hover">
            <echarts-pro
              ref="EchartsOneXYZ"
              type="XYZ"
            ></echarts-pro>
          </el-card
          >
        </el-tab-pane>
        <el-tab-pane label="数据表格" name="table">
          <el-card class="card_echarts" shadow="hover">
            <table-all ref="tableAll"></table-all>
          </el-card
          >
        </el-tab-pane>
      </el-tabs>


    </div>
    <x-loading v-show="isLoading"></x-loading>
  </div>

</template>

<script>
  import {searchRecord} from "@/services/model/appList";
  import ItemMixins from "../item.mixins";
  import EchartsOneCompose from "../../monitor-echarts/app/echarts-1-app";
  import EchartsPro from "../../monitor-echarts/app/echarts-1-3D-app";
  import XLoading from '@/components/animation/x-loading.vue'
  import TableAll from '../../monitor-echarts/tablesAll'

  const Base64 = require('js-base64').Base64
  export default {
    mixins: [ItemMixins],
    components: {EchartsOneCompose, EchartsPro, XLoading, TableAll},
    data() {
      return {
        activeName: "AB",
        isLoading: false,
        // 当前的图表钩子
        chartsName: ["EchartsOneAB", "EchartsOneAO", "EchartsOneBO", "yAngle", "xAngle",'in', 'az'],
      };
    },
    methods: {
      //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
      handleClick(tab, event) {
        this.chartsName.map((name) => {
          if (this.$refs[name]) {
            this.$nextTick(() => {
              this.$refs[name].echartResize();
            });
          }
        });
        this.$nextTick(() => {
          this.$refs.EchartsOneXYZ.echartResize();
        });
      },
      // 数据刷新
      async showDialog(token, pointName) {
        this.isLoading = true
        const {data} = await searchRecord({
          token
        });
        let dataList = []
        for (let i = 0; i < 15; i++) {
          dataList.push(data.recordList[i])
        }
        if (this.$refs.EchartsOneXYZ) {
          this.$nextTick(() => {
            this.$refs.EchartsOneXYZ.updateEchart(dataList, 1);
          });
        }
        if(this.$refs.tableAll){
          this.$nextTick(()=>{
            this.$refs.tableAll.upDateTable(data,1)
          })
        }
        this.chartsName.map(async (name) => {
          // holeDepth  当操作数据更新时，this.monitorInfo 可能未拿到值 所以通过传递
          if (this.$refs[name]) {
            this.$nextTick(() => {
              this.$refs[name].updateEchart(dataList, 1);

            });

          }
        });
        this.isLoading = false

      },

    },
    mounted() {
      //http://192.168.41.117:8080/1Mini?token=eyJtb25pdG9yVHlwZSI6MSwicG9pbnRJZCI6IjE0NTg3MDQ0NTc1NjI5NzYyNTgiLCJlbmRDcmVhdGVUaW1lIjoiMTYzNjYxNzkwODAwMCIsInN0YXJ0Q3JlYXRlVGltZSI6IjE2MzQwMjU5MDcwMDAifQ%3D%3D&pointName=深部位移
      let str = decodeURIComponent(this.$route.fullPath)
      let strs = str.slice(6)
      let a = strs.split("&")
      let token
      let pointName
      for (let i = 0; i < a.length; i++) {
        token = a[0].slice(7)
        pointName = a[1].slice(10)
      }
      this.showDialog(token, pointName)
    },
  };
</script>

<style scoped="scoped" lang="less">
  @import url("../commom.less");

  .monitor_page {
    width: 100vw;
    height: 100vh;

  }

  .tabsBoxs {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  // 还需自定义的css
  .card_echarts {
    width: 100vw;
    height: 90vh;
  }

  .tabBox {
    width: 100%;
    height: 100vh;
  }

</style>
